<form class="layui-form g-form" action="" lay-filter="table-config-form">
    <fieldset class="layui-elem-field">
        <legend>主键配置</legend>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label class="layui-form-label red-star">指定字段</label>
                <div class="layui-input-block">
                    <select name="idField" id="idSelector" lay-verify="required" lay-filter="id-selector" lay-search>
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">生成策略</label>
                <div class="layui-input-block">
                    <input type="radio" name="idStrategy" value="1" title="自增（auto） - int" checked>
                    <input type="radio" name="idStrategy" value="2" title="雪花ID - Long">
                    <input type="radio" name="idStrategy" value="3" title="UUID - String">
                    <input type="radio" name="idStrategy" value="4" title="自定义 - 类型为字段类型">
                </div>
            </div>
        </div>
    </fieldset>

    <fieldset class="layui-elem-field">
        <legend>逻辑删除配置</legend>
        <div class="logic-delete-tip">* 字段类型为smallint，逻辑删除值：1，逻辑非删除值：0</div>
        <div class="layui-field-box">
            <div class="layui-form-item">
                <label class="layui-form-label red-star">指定字段</label>
                <div class="layui-input-block">
                    <select name="logicDeleteField" id="logicDeleteSelector" lay-verify="required">
                        <option value="">请选择</option>
                    </select>
                </div>
            </div>
        </div>
    </fieldset>

    <div class="layui-form-item" style="text-align: center">
        <button class="layui-btn" lay-submit lay-filter="table-config-form-submit">保 存</button>
        <button class="layui-btn layui-btn-primary" type="reset">清 空</button>
    </div>
</form>

<script>
    layui.use(['form', 'layer', 'global'], function () {
        const form = layui.form
        const layer = layui.layer
        const $ = layui.$
        const config = layui.global

        const fieldList = config.getCache('table-config-form')

        form.render(null, 'table-config-form')
        // 渲染 selector
        $.each(fieldList, (i, o) => {
            $("#idSelector").append("<option value='" + o.id + "'>" + o.name + "</option>")
        })
        form.render('select', 'table-config-form')

        form.on('select(id-selector)', function(data){
            if (data.value !== '') {
                let list = fieldList.filter(e => e.id !== data.value)
                // 移除非第一项
                $("select[name='logicDeleteField'] option:gt(0)").remove();
                $.each(list, (i, o) => {
                    $("#logicDeleteSelector").append("<option value='" + o.id + "'>" + o.name + "</option>")
                })
                form.render('select', 'table-config-form')
            }
        });

        form.on('submit(table-config-form-submit)', function (o) {
            console.log('submit ==>', o.field)
            // TODO: 编写后台接口

            // 阻止自动提交
            return false
        })
    })
</script>

<style>
    .logic-delete-tip {
        color: #c2c2c2;
        font-size: 0.8rem;
        margin-left: 30px;
    }
</style>

